<template>
    <div class="wrap">
        <!-- <van-notice-bar scrollable color="#1989fa" background="#ecf9ff" left-icon="info-o">
           当前相机权限：{{messaget}}
        </van-notice-bar> -->
        <van-notice-bar scrollable color="#1989fa" background="#ecf9ff" left-icon="info-o">
           为了能够成功识别，请上传清晰的人脸照片
        </van-notice-bar>
        <van-form @submit="onSubmit">
            <!-- <van-field name="ptype" label="单选框">
            <template #input>
                <van-radio-group v-model="form.whetherOwner" direction="horizontal">
                    <van-radio :name="1">业主</van-radio>
                    <van-radio :name="2">非业主</van-radio>
                </van-radio-group>
            </template>
            </van-field> -->
            <van-field   name="uploader" label="头像上传">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onReadd" v-model="uploader1" />
                </template>
            </van-field>
           
                <van-field
                    v-model="form.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                />
                <!-- <van-field
                 v-if="!form.pictureId&&form.whetherOwner==1"
                    v-model="form.activationCode"
                    name="activationCode"
                    label="授权码"
                    placeholder="请填写授权码"
                    :rules="[{ required: true, message: '请填写授权码' }]"
                /> -->
                <van-field  v-if="type==1" :rules="[{ required: true, message: '请选择性别' }]"  name="sex" label="性别">
                    <template #input>
                        <van-radio-group v-model="form.sex" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                    v-if="type==1"
                    v-model="form.idCard"
                    name="idCard"
                    label="身份证"
                    placeholder="请填写身份证"
                    :rules="[{ required: true, message: '请填写身份证' }]"
                />
               
           
           <van-field
                v-model="form.phone"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
          <van-field
           v-if="type==1"
                    v-model="form.age"
                    name="age"
                    label="年龄"
                    placeholder="请填写年龄"
                    :rules="[{ required: true, message: '请填写年龄' }]"
                />
          
           
           
            
           
          

          
          
            <!-- <van-field

                name="village"
                label="小区"
                readonly
                @click="villagePicker=true"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]"
            /> -->
            <!-- <van-field
                v-model="form.building"
                name="building"
                label="楼栋号"
                placeholder="楼栋号"
                :rules="[{ required: true, message: '请填写楼栋号' }]"
            /> -->

            
           
            <!-- <van-field
                v-model="form.room"
                name="room"
                label="几层几室"
                placeholder="几层几室"
                :rules="[{ required: true, message: '请填写楼层号' }]"
            /> -->
          <van-field :rules="[{ required: true, message: '请选择政治面貌' }]" v-if="type==1" name="radios" label="政治面貌">
            <template #input>
                <van-radio-group v-model="form.zzmm" direction="horizontal">
                    <van-radio name="13">群众</van-radio>
                    <van-radio name="01">党员</van-radio>
                    <van-radio name="03">团员</van-radio>
                </van-radio-group>
            </template>
            </van-field>
          
           
           
          
          
          
           
          
          
         
           
           
            
            <div v-if="!hainfo" style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
            <div v-if="hainfo" style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                更新
                </van-button>
            </div>
        </van-form>

       
        
       
      
        
      
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup>
     
      

       

        
       
        
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myinfo.js'
    export default {
        data: function () {
            return {
                hainfo:'',
                type:'',
                messaget:'',
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                n_place:'',
                danPicker:false,
                fileList:[],
                fileList1:[],
                fileList2:[],
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                villagePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
                villageList:[],               
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                village:'',
                form:{
                    zzmm:'',
                    activationCode:'',
                    "openId": "",
                    "name": "",
                    "communityId": "",
                    "pictureId": "",
                    "idCard": "",
                    "phone": "",
                    "sex": "",
                    "age": '',
                    "building": "",
                    "room": ""
                }
            }
        },
        components: {
           
        },
        created(){
            this.type=sessionStorage.getItem('type')
            if(!openid){
                this.getOpenID()
            }else{
                this.getInfo()
            }
            //this.getAccess()
            // let xiaoqu=this.$route.query.xiaoqu
            // this.form.village=xiaoqu
            // for(let i=0;i<xiaoquList.length;i++){
            //     if(xiaoqu==xiaoquList[i].type){
            //         document.title=xiaoquList[i].name+'小区信息录入'
            //     }
            // }
        },
        mounted() {
           
        },
        methods: {
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                        
                   }
                   
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
            getInfo(){
                let that=this
                api.getInfo({openId:openid}).then(e=>{
                    if(e.code==200){
                        that.form=e.data
                        console.log(that.form)
                        let obj={
                            url:e.data.picture.url
                        }
                        that.hainfo=e.data.pictureId
                        if(e.data.pictureId){
                            that.uploader1.push(obj)
                        }
                        console.log('******')
                        console.log(that.uploader1)
                        // for(let i=0;i<that.villageList.length;i++){
                           
                        //     if(e.data.communityId===that.villageList[i].id){
                        //         that.village=that.villageList[i].name
                        //     }
                        // }
                    }
                }).catch(err=>{
                     console.log(err.response)
                })
                api.getOn({openId:openid}).then(e=>{
                   
                    if(e.code==200){
                        switch(Number(e.data)){
                            //0-未知 1-不允许 2-允许 3-失败
                            case 0:
                                that.messaget='未知'
                                break;
                            case 1:
                                that.messaget='不允许,请上传清晰照'
                                break;
                            case 2:
                                that.messaget='允许'
                                break;
                            case 3:
                                that.messaget='失败'
                                break;
                        }           
                    }
                }).catch(err=>{
                     
                     console.log(err.response)
                })
            },
            getAccess(){
                let url='http://api.weixin.qq.com/sns/oauth2/access_token?appid=wxf43b9ebf8b7e67cc&secret=SECRET&code=CODE&'+getQueryVariable('code')
                axios.get(url)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getOpenID(){
                let that=this
                let code=getQueryVariable('code')
              
                api.getOpenID({code}).then(e=>{
                    openid=e.data.data.openId
                    
                    setCookie('openid',openid,123)
                    that.getInfo()
                }).catch(err=>{
                   console.log(err.response.data)
                })
            },

            onReadd: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               let id=this.form.pictureId?this.form.pictureId:1234
                axios.post(BASE+`/picture/uploadImg/${id}`, formData, config).then(res => {
                    if(res.data.code===200){
                       
                    Toast.clear()
                       Notify({ type: 'success', message: '上传成功' });
                        that.form.pictureId=res.data.data.id
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                }).catch(err=>{
                    Toast.clear()
                    that.uploader1=[]
                    Notify({ type: 'warning', message: '上传失败' });
                    console.log(err)
                });
            },
           
           
           
          
            villageConfirm(val){
                this.form.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            },
            update(){
               let that=this
                api.update(that.form).then(e=>{
                Toast.clear()
                if(e.code===200){
                    Dialog.alert({
                        title: '提示',
                        message: '您的信息更新成功，请勿重复提交',
                    }).then(() => {
                        that.$router.push('/home')
                    });
                    Notify({ type: 'success', message: '录入成功' });
                }
            }).catch(err=>{
                Toast.clear()
                console.log()
            })
           },
          
           add(){
               let that=this
                api.add(that.form).then(e=>{
                Toast.clear()
                if(e.code===200){
                    Dialog.alert({
                        title: '提示',
                        message: '您的信息录入成功，请勿重复提交',
                    }).then(() => {
                        that.$router.push('/home')
                    });
                    Notify({ type: 'success', message: '录入成功' });
                }
            }).catch(err=>{
                Toast.clear()
                console.log()
            })
           },
           onSubmit(val){
               let that=this
               var  re = /^1\d{10}$/    //正则表达式
                
                if (re.test(this.form.phone)) {      //判断字符是否是11位数字
                   
                }
                else {
                    Toast('请输入正确手机号')
                   return
                }
                if(this.type==1){
                    if (this.form.idCard.length==18) {      //判断字符是否是11位数字
                   
                    }
                    else {
                        Toast('请输入正确身份证')
                    return
                    }
                }
               if(!that.form.pictureId){
                   Notify({ type: 'warning', message: '请上传头像' });
                   return
               }
               if(!openid){
                   Toast('没有获取openid，请退出系统重试')
                   return 
               }
                that.form.openId=openid
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    if(that.hainfo){
                        that.update()
                    }else{
                        that.add() 
                    }
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  

</style>
